<template>
	<view>
		<view class="kj-sidebar">
			<block v-if="!cityBol">
				<view v-if="!isEdit" :class="['sideitem',{'sideitem_act':0==activedId}]" @click="handleSelSide(0)">全部</view>
				<block v-for="(item) in sideList" :key="item.ID">
					<view :class="['sideitem',{'sideitem_act':item.ID==activedId}]" @click="handleSelSide(item.ID,item.Title)">
						{{item.Title}}
						<block v-if="isEdit">
							<view class="poa_del" @tap.stop="handleDelCate(item.ID)">
								<uni-icons type="clear" size="20" />
							</view>
							<view class="poa_edit" @tap.stop="handleEdit(item.ID,item.Title)">
								<uni-icons type="gear" size="20" />
							</view>
						</block>
					</view>
				</block>
			</block>
			<block v-else>
				<block v-for="(item) in sideList" :key="item.value">
					<view :class="['sideitem',{'sidecity_act':item.value==activedId}]" @click="handleSelSide(item.value,item.text)">
						{{item.text}}
					</view>
				</block>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		name:"kj-sidebar",
		data() {
			return {
			};
		},
		props: {
			activedId:{
				type: Number,
				default: 0
			},
			isEdit:{
				type: Boolean,
				default: false
			},
			cityBol:{
				type: Boolean,
				default: false
			},
			sideList: {
				type: Array,
				default: () => []
			}
		},
		methods:{
			handleSelSide(id,text){
				console.log('handleSelSide----------',id,text)
				this.$emit('handleSideChange',{id,text})
			},
			handleDelCate(id){
				this.$emit('handleDelCate',id)
			},
			handleEdit(id,text){
				this.$emit('handleEdit',{id,text})
			}
		}
	}
</script>

<style>
	.kj-sidebar{
		width: 150rpx;
	}
	.sideitem{
		/* box-sizing: border-box; */
		padding: 40rpx 24rpx 40rpx 16rpx;
		font-size: 22rpx;
		font-weight: 600;
		text-align: center;
		position: relative;
	}
	.sideitem_act{
		background-color: #fff;
	}
	.sidecity_act{
		border-left: 4rpx solid red;
	}
	.poa_del{
		position: absolute;
		right: 0;
		top: 10rpx;
	}
	.poa_edit{
		position: absolute;
		right: 0;
		bottom: 10rpx;
	}
</style>